<template>
   <div class="wrap">
      <v-header></v-header>
      <section class="main">
         <v-carousel :carousel="carList"></v-carousel>
         <div class="list">
            <ul>
               <li v-for="item in conList">
                  <div class="icon"></div>
                  <router-link :to="item.href" tag="div" class="item-info">
                     <strong>{{ item.title }}</strong>
                     <p>{{ item.con }}</p>
                  </router-link>
               </li>
            </ul>
         </div>
      </section>
      <v-footer :footList="footList"></v-footer>
   </div>
</template>

<script>
import vHeader from './public/header'
import vFooter from './public/footer'
import vCarousel from './public/carousel'

import imgSrc1 from "../assets/banner.png";
import imgSrc2 from "../assets/banner2.jpg";
import imgSrc3 from "../assets/banner.png";
export default {
	data() {
   	return {
		   carList : [
            {
               src : imgSrc1,
               active : true
            },
            {
               src : imgSrc2,
               active :false
            },
            {
               src : imgSrc3,
               active :false
            }
         ],
         conList : [
            {
               title : '微额借款',
               con : '金额500、1000元，期限7天、14天、21天',
               href : '/index/Loan'
            },
            {
               title : '小额借款',
               con : '最高金额5000元，最长期限6个月',
               href : 'Loan'
            },
            {
               title : '草根福利借款',
               con : '最高金额10000元，期限30天',
               href : 'Loan'
            },
         ],
         footList : [
            {
               url : '/',
               title : '借款'
            },
            {
               url : '/credit',
               title : '信用'
            },
            {
               url : '/user',
               title : '个人中心'
            },
         ]
   	}
	},
	methods: {
      
	},
	components: {
		vHeader,vFooter,vCarousel
	},
   beforeCreate(){
      this.$axios.get('#/user')
        .then(function (response) {
          console.log(response.data);
        })
        .catch(function (error) {
          console.log(error);
        });
      }
}
</script>

<style scoped>
   .list{padding-top:0.12rem; background:#E8EAEC; margin-bottom: 0.15rem;} 
   .list ul{overflow:hidden; background:#fff;}
   .list li{overflow:hidden; margin:0 0 0.1rem 0; padding:0.15rem 0 0.1rem 0; border-bottom:1px solid #eee;}
   .list li:last-child{border:none;}
   .list .icon{width:0.55rem; height:0.55rem; background-size:100% !important;background:url(../assets/icon.png) no-repeat; margin:0 0.1rem; float:left; overflow:hidden;}
   .list li:nth-of-type(2) .icon{background-position:0 33.3%;}
   .list li:nth-of-type(3) .icon{background-position:0 66.6%;}
   .list .item-info{float:left; width:2.37rem;}
   .list .item-info strong{height:0.25rem; font-size:0.12rem; line-height:0.25rem;}
   .list .item-info p{color:#999; font-size:0.12rem;}
</style>
